<template>
	<view class="container">
		<view class="app-header">
			<image class="app-icon" :src="appIcon" mode="widthFix" />
			<view class="app-details">
				<view class="info-block name">
					<text class="info-value">名称:{{ appInfo.appName }}</text>
				</view>
				<view class="info-block package">
					<text class="info-value">包名:{{ appInfo.packageName }}</text>
				</view>
				<view class="info-block md5">
					<text class="info-value">MD5:{{ appInfo.md5 }}</text>
				</view>
				<view class="info-block sha1">
					<text class="info-value">SHA1:{{ appInfo.sha1 }}</text>
				</view>
			</view>
		</view>

		<view class="btn-container">
			<button class="copy-btn" type="primary" @click="copyAppInfo">复制应用信息</button>
		</view>
	</view>
</template>

<script>
	import {
		getInfo
	} from '../../uni_modules/wen-code'

	export default {
		data() {
			return {
				appIcon: '',
				appInfo: {
					appIcon: '',
					appName: '',
					packageName: '',
					md5: '',
					sha1: ''
				}
			}
		},
		async onLoad(options) {
			try {
				const value = JSON.parse(options.item || '{}')
				this.appInfo = {
					...this.appInfo,
					...value
				}
				this.appIcon = this.appInfo.appIcon.replace(new RegExp(" ", "gm"), "+");
				if (this.appInfo.packageName) {
					const signatureMap = await getInfo(this.appInfo.packageName)
					this.appInfo.md5 = signatureMap.md5 || ''
					this.appInfo.sha1 = signatureMap.sha1 || ''
				}
			} catch (err) {
				console.error('onLoad 解析失败或签名获取异常:', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		methods: {
			copyAppInfo() {
				const {
					appName,
					packageName,
					md5,
					sha1
				} = this.appInfo
				const info = `应用名称:${appName}\n包名:${packageName}\nMD5:${md5}\nSHA1:${sha1}`
				uni.setClipboardData({
					data: info,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 24rpx;
	}

	.app-header {

		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.app-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;

	}

	.app-details {
		display: flex;
		flex-direction: column;
	}

	/* 高亮块样式 */
	.info-block {
		margin-top: 10rpx;
		border-radius: 12rpx;
		word-break: break-all;
		white-space: normal;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		line-height: 40rpx;
		font-size: 28rpx;
	}



	.info-label {
		font-weight: bold;
		color: #333;
		margin-right: 8rpx;
	}

	.info-value {
		color: #555;
		flex: 1;
	}

	/* 复制按钮 */
	.btn-container {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.copy-btn {
		width: 80%;
		border-radius: 12rpx;
		font-size: 30rpx;
	}
</style>